import { WatchButton } from "@/components/intelligence/watch-button";
import type { EventType, ProjectDetail } from "@dci/core";
import { partialDateSortKey } from "@dci/core";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import type { ReactNode } from "react";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { EntityMap } from "@/components/entity/entity-map";
import { JsonLd } from "@/components/entity/json-ld";
import { ExtLink, KeyValueList } from "@/components/entity/kv";
import { ProvenanceTable, WithProvenance } from "@/components/entity/provenance";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { EventList } from "@/components/event-list";
import { ClaimsTable, DataQualityPanel, Evidence, EvidenceProvider, NearbyInfrastructurePanel } from "@/components/evidence";
import { ProjectStages, ProjectVelocity } from "@/components/project-stages";
import { AiMark, Badge, ConfidenceBadge, EstimateMark, PrecisionBadge, ScopeBadge, SemanticsLabel, StatusBadge } from "@/components/ui/badge";
import { Page, Section } from "@/components/ui/card";
import { CountryFlag } from "@/components/ui/country-flag";
import { ErrorState, OfflineNotice } from "@/components/ui/states";
import { SourceHistory, TimelineList, type TimelineEntry } from "@/components/ui/timeline";
import { countryName, fmtDate, fmtInt, fmtMw, fmtUsd, placeLine, splitMw } from "@/lib/format";
import { fmtPartialDateSafe } from "@/lib/format-project";
import { CONFIDENCE_LABEL, EVENT_LABEL, PRECISION_LABEL, STATUS_LABEL, isSiteScopeLabel } from "@/lib/labels";
import { routes } from "@/lib/routes";
import { absoluteUrl, compactJsonLd, NOT_FOUND_METADATA, pageMetadata } from "@/lib/seo";
import { getProject } from "./data";

export const revalidate = 300;

type Props = { params: Promise<{ slug: string }> };

function describe(p: ProjectDetail): string {
  if (p.description) return p.description;
  const bits = [`${p.name}: ${STATUS_LABEL[p.status].toLowerCase()} data center project`];
  if (p.operator) bits.push(`by ${p.operator.name}`);
  const place = placeLine(p);
  if (place !== "—") bits.push(`in ${place}`);
  if (p.plannedMw !== null && siteScoped(p.capacityScope)) bits.push(`— ≈ ${fmtMw(p.plannedMw)} planned (published figure)`);
  if (p.investmentUsd !== null && siteScoped(p.investmentScope)) bits.push(`, ${fmtUsd(p.investmentUsd)} announced`);
  if (p.expectedOpening) bits.push(`, expected ${fmtPartialDateSafe(p.expectedOpening)}`);
  return `${bits.join(" ")}. Lifecycle stages, timeline, claims with scope and provenance.`;
}

/** A header figure may only stand for the project when its scope is a site scope (or unknown-but-assigned legacy). */
function siteScoped(scope: string | null | undefined): boolean {
  return scope === null || scope === undefined || isSiteScopeLabel(scope);
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await getProject(slug);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Project" };
  return pageMetadata({ title: r.data.name, description: describe(r.data), path: routes.project(r.data.slug) });
}

function humanType(t: string): string {
  return EVENT_LABEL[t as EventType] ?? t.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
}

function toneFor(t: string): TimelineEntry["tone"] {
  switch (t) {
    case "construction_started":
    case "phase_announced":
      return "warn";
    case "facility_opened":
    case "cloud_region_launched":
      return "ok";
    case "project_announced":
    case "expansion_announced":
    case "investment_announced":
    case "power_agreement":
      return "accent";
    case "closure":
    case "incident":
    case "project_cancelled":
      return "danger";
    default:
      return "neutral";
  }
}

function Figure({ label, children, note }: { label: ReactNode; children: ReactNode; note?: ReactNode }) {
  return (
    <div className="min-w-0 px-3 py-3 sm:px-4 sm:first:pl-0">
      <div className="label-caps mb-1 truncate">{label}</div>
      <div className="min-w-0">{children}</div>
      {note && <div className="mt-1 text-[11px] leading-tight text-ink-3">{note}</div>}
    </div>
  );
}

const PROJECT_CLASS_LABEL: Record<string, string> = {
  NEW_BUILD: "New build",
  EXPANSION: "Expansion",
  CONSTRUCTION_START: "Construction start",
  PERMIT: "Permit",
  LAND_ACQUISITION: "Land acquisition",
  GRID_CONNECTION: "Grid connection",
  POWER_AGREEMENT: "Power agreement",
  FINANCING: "Financing",
  ACQUISITION: "Acquisition",
  PARTNERSHIP: "Partnership",
  CUSTOMER_AGREEMENT: "Customer agreement",
};

export default async function ProjectPage({ params }: Props) {
  const { slug } = await params;
  const r = await getProject(slug);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const p = r.data;
  const base = routes.project(p.slug);
  const place = placeLine(p);
  const hasGeo = p.lat !== null && p.lng !== null;
  const precision = p.geoPrecision ?? (hasGeo ? "city" : "unknown");
  const claims = p.claims ?? [];
  const history = p.history ?? [];
  const mwSite = siteScoped(p.capacityScope);
  const usdSite = siteScoped(p.investmentScope);
  const dq = p.dataQuality;

  const timeline: TimelineEntry[] = [...p.timeline]
    .sort((a, b) => partialDateSortKey(a.date.length > 10 ? a.date.slice(0, 10) : a.date) - partialDateSortKey(b.date.length > 10 ? b.date.slice(0, 10) : b.date))
    .map((t) => ({ date: t.date, title: humanType(t.type), description: t.description, meta: t.sourceName ? <span>{t.sourceName}</span> : undefined, href: t.url, tone: toneFor(t.type) }));
  for (const s of p.statusHistory) timeline.push({ date: s.date, title: `${s.from ? `${STATUS_LABEL[s.from]} → ` : ""}${STATUS_LABEL[s.to]}`, href: s.url, tone: s.to === "under_construction" ? "warn" : s.to === "operational" ? "ok" : s.to === "cancelled" || s.to === "delayed" ? "danger" : "neutral" });
  if (p.expectedOpening) timeline.push({ date: p.expectedOpening, title: <span className="text-ink-2">Expected opening</span>, description: p.phaseCount ? `phase 1 of ${fmtInt(p.phaseCount)} — expected, as published by the source` : "expected, as published by the source", tone: "neutral" });
  timeline.sort((a, b) => partialDateSortKey(a.date.slice(0, 10)) - partialDateSortKey(b.date.slice(0, 10)));

  const sections = [
    { id: "lifecycle", label: "Lifecycle" },
    { id: "figures", label: "Figures & claims" },
    { id: "timeline", label: "Timeline", count: timeline.length },
    { id: "about", label: "About", count: p.description || p.sourceUrl || p.facility || p.campus ? 1 : 0 },
    { id: "location", label: "Location" },
    { id: "nearby", label: "Nearby", count: hasGeo ? 1 : 0 },
    { id: "related", label: "Related events", count: p.relatedEvents.length + p.events.length },
    { id: "provenance", label: "Source evidence", count: p.provenance.length },
    { id: "quality", label: "Data quality" },
  ];

  const jsonLd = compactJsonLd({
    "@context": "https://schema.org",
    "@type": "Project",
    name: p.name,
    description: p.description ?? undefined,
    url: absoluteUrl(base),
    sameAs: p.sourceUrl ?? undefined,
    foundingDate: p.announcedOn ?? undefined,
    parentOrganization: p.operator ? { "@type": "Organization", name: p.operator.name, url: absoluteUrl(routes.operator(p.operator.slug)) } : undefined,
    location: place !== "—" || hasGeo ? compactJsonLd({ "@type": "Place", name: place !== "—" ? place : undefined, address: p.countryIso2 ? { "@type": "PostalAddress", addressLocality: p.city ?? undefined, addressRegion: p.regionName ?? undefined, addressCountry: p.countryIso2 } : undefined, geo: hasGeo && precision !== "unknown" ? { "@type": "GeoCoordinates", latitude: p.lat, longitude: p.lng } : undefined }) : undefined,
    additionalProperty: [
      { "@type": "PropertyValue", name: "status", value: STATUS_LABEL[p.status] },
      p.plannedMw !== null && mwSite ? { "@type": "PropertyValue", name: "Planned capacity", value: p.plannedMw, unitText: "MW" } : null,
      { "@type": "PropertyValue", name: "geoPrecision", value: PRECISION_LABEL[precision] },
    ].filter(Boolean),
  });

  const mwSplit = splitMw(p.plannedMw);

  return (
    <EvidenceProvider data={{ entityName: p.name, entityKind: "project", claims, provenance: p.provenance, history }}>
      <Page>
        <Breadcrumbs items={[{ name: "Projects", href: routes.projects() }, { name: p.name, href: base }]} className="pt-3" />
        <JsonLd data={jsonLd} />

        <header className="py-5 sm:py-7">
          <div className="label-caps mb-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
            <span>Project</span>
            {p.projectClass && PROJECT_CLASS_LABEL[p.projectClass] && (
              <>
                <span aria-hidden className="text-ink-4">·</span>
                <span>{PROJECT_CLASS_LABEL[p.projectClass]}</span>
              </>
            )}
            {p.operator && (
              <>
                <span aria-hidden className="text-ink-4">·</span>
                <Link href={routes.operator(p.operator.slug)} className="normal-case tracking-normal text-[12.5px] font-medium text-ink-2 hover:text-accent hover:underline">
                  {p.operator.name}
                </Link>
              </>
            )}
          </div>
          <div className="flex flex-wrap items-start justify-between gap-2">
            <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">{p.name}</h1>
            <WatchButton entityType="project" slug={p.slug} entityId={p.id} name={p.name} />
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] text-ink-2">
            {!p.operator && <span className="text-ink-3">Operator not published</span>}
            {p.developer && p.developer.id !== p.operator?.id && (
              <span>
                developed by{" "}
                <Link href={routes.operator(p.developer.slug)} className="text-ink hover:text-accent hover:underline">
                  {p.developer.name}
                </Link>
              </span>
            )}
            {p.tenant && (
              <span>
                for{" "}
                <Link href={routes.operator(p.tenant.slug)} className="text-ink hover:text-accent hover:underline">
                  {p.tenant.name}
                </Link>
              </span>
            )}
            {(place !== "—" || p.metro) && (
              <span className="inline-flex items-center gap-1.5">
                <CountryFlag iso2={p.countryIso2} size={12} />
                {p.metro && (
                  <Link href={routes.market(p.metro.slug)} className="hover:text-ink hover:underline">
                    {p.metro.name} market
                  </Link>
                )}
                {p.metro && place !== "—" && <span className="text-ink-4">·</span>}
                {place !== "—" && <span>{place}</span>}
              </span>
            )}
          </div>
          <div className="mt-3 flex flex-wrap items-center gap-1.5">
            {p.isAi && <AiMark evidence={p.aiEvidence} size="sm" />}
            {p.evidenceLevel && (
              <Badge tone={p.evidenceLevel === "strong" ? "ok" : p.evidenceLevel === "weak" ? "warn" : "outline"} size="sm" title="Creation evidence: name or operator + location + development verb">
                {p.evidenceLevel} evidence
              </Badge>
            )}
            {p.phaseCount !== null && (
              <Badge tone="outline" size="sm">
                {fmtInt(p.phaseCount)} phases
              </Badge>
            )}
          </div>
        </header>

        {/* header figures */}
        <div className="grid grid-cols-2 border-y border-hair [&>*]:min-w-0 max-sm:[&>*:nth-child(even)]:border-l max-sm:[&>*:nth-child(n+3)]:border-t max-sm:[&>*:nth-child(odd)]:pl-0 max-sm:[&>*]:border-hair sm:grid-cols-3 sm:[&>*:nth-child(n+4)]:border-t sm:[&>*:nth-child(3n+1)]:pl-0 sm:[&>*:not(:nth-child(3n+1))]:border-l sm:[&>*]:border-hair lg:grid-cols-6 lg:[&>*:nth-child(n+4)]:border-t-0 lg:[&>*:nth-child(3n+1)]:pl-4 lg:[&>*:first-child]:pl-0 lg:[&>*+*]:border-l">
          <Figure label="Stage">
            <Evidence field="status" display={STATUS_LABEL[p.status]}>
              <StatusBadge status={p.status} />
            </Evidence>
          </Figure>
          <Figure label="Planned capacity">
            {p.plannedMw !== null && mwSite && mwSplit ? (
              <Evidence field="plannedMw" fields={["plannedPowerMw", "planned_power_mw", "phase_mw"]} display={`≈ ${fmtMw(p.plannedMw)}`} block>
                <div className="flex items-baseline gap-1 leading-none">
                  <EstimateMark className="text-[14px]" />
                  <span className="figure text-[22px] font-medium tracking-[-0.03em] text-ink sm:text-[26px]">{mwSplit.value}</span>
                  <span className="text-[12px] font-medium text-ink-3">{mwSplit.unit}</span>
                </div>
                <div className="mt-1 flex flex-wrap items-center gap-1.5">
                  <SemanticsLabel semantics={p.capacitySemantics ?? "planned_power_mw"} />
                  {p.capacityScope && <ScopeBadge scope={p.capacityScope} />}
                </div>
              </Evidence>
            ) : (
              <Evidence field="plannedMw" fields={["plannedPowerMw", "planned_power_mw", "phase_mw"]} display="—" block>
                <div className="figure text-[22px] font-medium leading-none tracking-[-0.03em] text-ink-4 sm:text-[26px]">—</div>
                <div className="mt-1 text-[11px] leading-tight text-ink-3">{p.plannedMw !== null ? `${fmtMw(p.plannedMw)} is a ${p.capacityScope}-level figure — not this site's (see claims)` : "Not published by any source"}</div>
              </Evidence>
            )}
          </Figure>
          <Figure label="Investment">
            {p.investmentUsd !== null && usdSite ? (
              <Evidence field="investmentUsd" fields={["investment_usd"]} display={fmtUsd(p.investmentUsd)} block>
                <div className="figure text-[22px] font-medium leading-none tracking-[-0.03em] text-ink sm:text-[26px]">{fmtUsd(p.investmentUsd)}</div>
                <div className="mt-1 flex flex-wrap items-center gap-1.5">
                  <SemanticsLabel semantics={p.investmentSemantics ?? "project_investment_usd"} />
                  {p.investmentScope && <ScopeBadge scope={p.investmentScope} />}
                  {p.investmentCurrency && p.investmentCurrency !== "USD" && p.investmentOriginal && <span className="figure text-[11px] text-ink-3">{fmtInt(p.investmentOriginal)} {p.investmentCurrency}</span>}
                </div>
              </Evidence>
            ) : (
              <Evidence field="investmentUsd" fields={["investment_usd"]} display="—" block>
                <div className="figure text-[22px] font-medium leading-none tracking-[-0.03em] text-ink-4 sm:text-[26px]">—</div>
                <div className="mt-1 text-[11px] leading-tight text-ink-3">{p.investmentUsd !== null ? `${fmtUsd(p.investmentUsd)} is a ${p.investmentScope}-level figure — not this site's (see claims)` : "Not disclosed"}</div>
              </Evidence>
            )}
          </Figure>
          <Figure label="Expected opening" note={p.expectedOpening ? "as published" : "not published"}>
            <Evidence field="expectedOpening" fields={["expected_opening"]} display={p.expectedOpening ? fmtPartialDateSafe(p.expectedOpening) : "—"} block>
              <div className={`figure text-[18px] font-medium leading-none tracking-[-0.02em] ${p.expectedOpening ? "text-ink" : "text-ink-4"}`}>{p.expectedOpening ? fmtPartialDateSafe(p.expectedOpening) : "—"}</div>
            </Evidence>
          </Figure>
          <Figure label="Announced" note={p.announcedOn ? undefined : "date not published"}>
            <Evidence field="announcedOn" fields={["announced_on"]} display={p.announcedOn ? fmtDate(p.announcedOn) : "—"} block>
              <div className={`figure text-[18px] font-medium leading-none tracking-[-0.02em] ${p.announcedOn ? "text-ink" : "text-ink-4"}`}>{p.announcedOn ? fmtDate(p.announcedOn) : "—"}</div>
            </Evidence>
          </Figure>
          <Figure label="Confidence" note={`${fmtInt(dq.sourceCount)} ${dq.sourceCount === 1 ? "source" : "sources"} · ${fmtInt(dq.primarySourceCount)} primary`}>
            <ConfidenceBadge level={p.confidence} short={false} />
          </Figure>
        </div>
        <p className="mt-2 text-[11px] text-ink-4">Planned MW and investment are published figures (≈ never imputed). A company-wide or portfolio figure is never shown as this project&apos;s own; it is listed under “Figures not assigned to this site”. Click a figure for its evidence.</p>

        <SectionNav items={sections} className="mt-4" />

        <div className="flex flex-col gap-9 pt-6">
          <Section id="lifecycle" title="Lifecycle" className="scroll-mt-28" description="Rumored → proposed → announced → permitting → approved → construction → opened. Dates come from the announcement that moved the stage; delayed / cancelled are side branches.">
            <ProjectStages stages={p.stages} />
            <div className="mt-6">
              <div className="label-caps mb-2">Velocity</div>
              <ProjectVelocity v={p.velocityDays} />
            </div>
          </Section>

          <Section id="figures" title="Figures & claims" className="scroll-mt-28" description="Every capacity and investment claim extracted for this project with its scope. Only site-scoped claims can become the project's figures.">
            <div className="flex flex-col gap-5">
              <div>
                <div className="label-caps mb-2">Capacity claims</div>
                <ClaimsTable claims={claims} kind="capacity" emptyNote={p.plannedMw !== null ? "No sentence-level capacity claim stored yet — the planned figure comes from the source fields listed under Source evidence." : "No source has published a capacity figure for this project."} />
              </div>
              <div>
                <div className="label-caps mb-2">Investment claims</div>
                <ClaimsTable claims={claims} kind="investment" emptyNote={p.investmentUsd !== null ? "No sentence-level investment claim stored yet — the figure comes from the source fields listed under Source evidence." : "No investment figure disclosed."} />
              </div>
              {((p.plannedMw !== null && !mwSite) || (p.investmentUsd !== null && !usdSite)) && (
                <div>
                  <div className="mb-1.5 flex flex-wrap items-baseline gap-x-2">
                    <h3 className="text-[13px] font-semibold text-ink">Figures not assigned to this site</h3>
                    <span className="text-[11.5px] text-ink-3">scope is wider than the project — shown as context only</span>
                  </div>
                  <KeyValueList
                    items={[
                      { label: "Planned MW", value: p.plannedMw !== null && !mwSite ? <span className="inline-flex flex-wrap items-center gap-1.5"><span className="figure">≈ {fmtMw(p.plannedMw)}</span><ScopeBadge scope={p.capacityScope} /><SemanticsLabel semantics={p.capacitySemantics} /></span> : null },
                      { label: "Investment", value: p.investmentUsd !== null && !usdSite ? <span className="inline-flex flex-wrap items-center gap-1.5"><span className="figure">{fmtUsd(p.investmentUsd)}</span><ScopeBadge scope={p.investmentScope} /><SemanticsLabel semantics={p.investmentSemantics} /></span> : null },
                    ]}
                  />
                </div>
              )}
            </div>
          </Section>

          <Section id="timeline" title="Timeline" className="scroll-mt-28" description="Dated milestones and status transitions from the sources indexed; partial dates (year, quarter) are shown as published.">
            {timeline.length ? <TimelineList items={timeline} /> : <p className="text-[12.5px] text-ink-3">No dated milestone has been published for this project yet.</p>}
          </Section>

          <Section id="about" title="About" className="scroll-mt-28">
            {p.description ? <p className="max-w-3xl text-[14px] leading-relaxed text-ink-2">{p.description}</p> : <p className="text-[12.5px] text-ink-3">No description published.</p>}
            <KeyValueList
              className="mt-3"
              columns={2}
              items={[
                { label: "Operator", value: p.operator ? <Link href={routes.operator(p.operator.slug)} className="hover:text-accent hover:underline">{p.operator.name}</Link> : <span className="text-[12.5px] text-ink-3">Not published</span>, keepEmpty: true },
                { label: "Developer", value: p.developer ? <Link href={routes.operator(p.developer.slug)} className="hover:text-accent hover:underline">{p.developer.name}</Link> : <span className="text-[12.5px] text-ink-3">Not published</span>, keepEmpty: true },
                { label: "Tenant", value: p.tenant ? <Link href={routes.operator(p.tenant.slug)} className="hover:text-accent hover:underline">{p.tenant.name}</Link> : null },
                { label: "Facility", value: p.facility ? <Link href={routes.facility(p.facility.slug)} className="hover:text-accent hover:underline">{p.facility.name}</Link> : null },
                { label: "Campus", value: p.campus ? <Link href={routes.facility(p.campus.slug)} className="hover:text-accent hover:underline">{p.campus.name}</Link> : null },
                { label: "Site", value: p.acreage !== null ? <span className="figure">{fmtInt(p.acreage)} acres</span> : null },
                { label: "Primary source", value: p.sourceUrl ? <ExtLink href={p.sourceUrl} /> : null },
                { label: "Last update", value: <span className="figure text-[12.5px] text-ink-2">{fmtDate(p.lastUpdate)}</span> },
              ]}
            />
          </Section>

          <Section id="location" title="Location" className="scroll-mt-28" description={hasGeo ? `${PRECISION_LABEL[precision]} — the ring marks the area published by the sources, not a parcel.` : "Location as published; no coordinates yet."} aside={<PrecisionBadge precision={precision} short={false} size="xs" />}>
            <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
              <KeyValueList
                items={[
                  { label: "City", value: p.city },
                  { label: "Region", value: p.regionName },
                  { label: "Country", value: p.countryIso2 ? <span className="inline-flex items-center gap-1.5"><CountryFlag iso2={p.countryIso2} size={12} />{countryName(p.countryIso2)}</span> : null },
                  { label: "Market", value: p.metro ? <Link href={routes.market(p.metro.slug)} className="hover:text-accent hover:underline">{p.metro.name}</Link> : null },
                  { label: "Coordinates", value: hasGeo ? <Evidence field="lat" fields={["lng", "geo", "coordinates", "geoPrecision"]}><span className="figure">{p.lat!.toFixed(precision === "exact" || precision === "parcel" ? 4 : 2)}, {p.lng!.toFixed(precision === "exact" || precision === "parcel" ? 4 : 2)}</span></Evidence> : <span className="text-[12.5px] text-ink-3">Not published</span>, keepEmpty: true },
                  { label: "Precision", value: <WithProvenance items={p.provenance} fields={["geoPrecision", "geo_precision"]}><PrecisionBadge precision={precision} short={false} size="xs" /></WithProvenance>, keepEmpty: true },
                ]}
              />
              {hasGeo ? <EntityMap center={{ lat: p.lat!, lng: p.lng! }} precision={precision} filters={p.countryIso2 ? { country: p.countryIso2 } : undefined} className="h-[220px] sm:h-[280px]" /> : <div className="flex min-h-[140px] items-center justify-center rounded-sm border border-dashed border-hair-2 text-[12.5px] text-ink-3">No coordinates published — not drawn on the map.</div>}
            </div>
          </Section>

          <Section id="nearby" title="Nearby infrastructure" className="scroll-mt-28" description="Great-circle distance from the published (often city-level) point. Proximity never implies a connection.">
            {hasGeo ? <NearbyInfrastructurePanel initial={p.nearbyInfrastructure} center={{ lat: p.lat!, lng: p.lng! }} /> : <p className="rounded-sm border border-dashed border-hair-2 px-3 py-2.5 text-[12.5px] text-ink-3">Nearby infrastructure needs a published location for this project.</p>}
          </Section>

          <Section id="related" title="Related events" className="scroll-mt-28" description="Events attached to this project — announcements, power agreements, financing, status changes — deduplicated across sources.">
            <EventList events={[...p.relatedEvents, ...p.events.filter((e) => !p.relatedEvents.some((x) => x.id === e.id))]} dense emptyTitle="No related event yet" emptyDescription="Announcements, agreements and status changes will list here as connectors detect them." />
          </Section>

          <Section id="provenance" title="Source evidence" className="scroll-mt-28" description="Every field with its source, observation dates, confidence and extraction method. “Shown” marks the winner backing the displayed value.">
            <ProvenanceTable items={p.provenance} />
            {p.sourceHistory.length > 0 && (
              <details className="mt-4">
                <summary className="cursor-pointer text-[12.5px] font-medium text-ink-2 hover:text-ink">
                  Source observation log <span className="figure text-ink-3">{fmtInt(p.sourceHistory.length)}</span>
                </summary>
                <div className="mt-3">
                  <SourceHistory items={p.sourceHistory} />
                </div>
              </details>
            )}
            <p className="mt-2 text-[11.5px] text-ink-4">
              {CONFIDENCE_LABEL[p.confidence]} overall.{" "}
              <Link href={`${routes.methodology()}#confidence`} className="underline decoration-hair-2 hover:text-ink">
                How confidence is computed
              </Link>
            </p>
          </Section>

          <Section id="quality" title="Data quality" className="scroll-mt-28">
            <DataQualityPanel q={dq} />
          </Section>
        </div>

        <SourcesFooter sources={r.sources} updatedAt={p.lastUpdate} />
      </Page>
    </EvidenceProvider>
  );
}